<template>
  <el-dialog draggable :title="title" :model-value="visible" @closed="close" width="450">
      <el-form label-width="80px" :rules="rules" :model="formData" ref="form" @submit="handleConfirm">
        <el-form-item label="账单分类" prop="category">
          <el-select
              v-model="formData.category"
              placeholder="请选择账单分类"
          >
            <el-option :label="value.name" :value="key" v-for="(value, key) in categoryTypes" :key="key"/>
          </el-select>
        </el-form-item>
        <el-form-item label="账单时间" prop="billTime">
          <el-date-picker
              v-model="formData.billTime"
              type="date"
              placeholder="选择日期"
              format="YYYY/MM/DD"
              clearable
          />
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input-number
              :step="0.01"
              step-strictly
              :precision="2"
              v-model="formData.amount"
              placeholder="请输入账单金额"
              :min="0"
              :controls="false"
          />
        </el-form-item>
        <el-form-item label="是否完成" prop="isComplete">
          <el-select
              v-model="formData.isComplete"
          >
            <el-option label="完成" :value="1"/>
            <el-option label="未完成" :value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
              v-model="formData.remark"
              :rows="2"
              type="textarea"
              placeholder="请输入备注"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">确认</el-button>
          <el-button @click="close">关闭</el-button>
        </el-form-item>
      </el-form>
  </el-dialog>
</template>

<script setup>

const props = defineProps(['visible', 'title', 'billData', 'isCompany', 'categoryTypes']);
const emit = defineEmits(['update:visible', 'confirm', 'cancel']);
const {
  visible,
  title,
  billData,
  isCompany,
  categoryTypes
} = toRefs(props);

const form = ref(null);
const formData = ref(billData);
watch(() => billData.value, () => {
  clearErrorTip();
});

onMounted(() => {
  console.log('billMessage onmounted', formData.value.category, categoryTypes);
});

const rules = reactive({
  category: [{ required: true, message: '请选择分类', trigger: 'blur' }],
  billTime: [{ required: true, message: '请输入账单时间', trigger: 'blur' }],
  amount: [{ required: true, message: '请输入金额', trigger: 'blur' }],
  isComplete: [{ required: true, message: '请选择是否完成', trigger: 'blur' }],
});

const handleConfirm = (e) => {
  e.preventDefault();
  form.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    emit('update:visible', false);
    emit('confirm', {
      ...formData.value,
      // 从elementplus时间转化成时间戳
      billTime: formData.value.billTime.getTime ? formData.value.billTime.getTime() : formData.value.billTime,
    });
  });
};

const close = () => {
  emit('update:visible', false);
  emit('cancel');
};

const clearErrorTip = () => {
  form.value && form.value.clearValidate();
};

const handleFormatter = (row, col, value, index) => {
  if(col.property === 'creatorId') {
    let item = companyUserList.value.find(item => item.userId === value);
    return  item ? item.username : value;
  }
  return value;
};

</script>

<style scoped lang="scss">
.el-input {
  --el-input-width: 100%;
}

.el-select {
  --el-select-width: 100%;
}
.el-input-number {
  width: 100%;
}
:deep(.el-input-number .el-input__inner) {
  text-align: left !important;
}
:deep(.el-card__body .el-form-item) {
  padding: 0 0 15px;
}

</style>
